React createPortal: પોર્ટલ બનાવવું અને ઇવેન્ટ હેન્ડલિંગમાં નિપુણતા

React સાથેના આધુનિક વેબ ડેવલપમેન્ટમાં, એવા યુઝર ઇન્ટરફેસ બનાવવા ખૂબ જ મહત્વપૂર્ણ છે જે અંતર્ગત ડોક્યુમેન્ટ સ્ટ્રક્ચર સાથે સરળતાથી સંકલિત થાય. જ્યારે React નું કમ્પોનન્ટ મોડેલ વર્ચ્યુઅલ DOM ને મેનેજ કરવામાં શ્રેષ્ઠ છે, ત્યારે કેટલીકવાર આપણે સામાન્ય કમ્પોનન્ટ હાઇરાર્કીની બહાર એલિમેન્ટ્સ રેન્ડર કરવાની જરૂર પડે છે. અહીં જ createPortal કામ આવે છે. આ માર્ગદર્શિકા createPortal ની ઊંડાણપૂર્વક શોધ કરે છે, જેમાં તેનો હેતુ, ઉપયોગ અને ઇવેન્ટ્સને હેન્ડલ કરવા અને જટિલ UI એલિમેન્ટ્સ બનાવવા માટેની અદ્યતન તકનીકોને આવરી લેવામાં આવી છે. અમે આંતરરાષ્ટ્રીયકરણની વિચારણાઓ, એક્સેસિબિલિટી માટેની શ્રેષ્ઠ પદ્ધતિઓ અને ટાળવા જેવી સામાન્ય ભૂલોને આવરી લઈશું.

React createPortal શું છે?

createPortal એ એક React API છે જે તમને React કમ્પોનન્ટના ચિલ્ડ્રનને DOM ટ્રીના બીજા ભાગમાં, પેરેન્ટ કમ્પોનન્ટની હાઇરાર્કીની બહાર રેન્ડર કરવાની મંજૂરી આપે છે. આ મોડલ્સ, ટૂલટિપ્સ, ડ્રોપડાઉન્સ અને ઓવરલે જેવા એલિમેન્ટ્સ બનાવવા માટે ખાસ કરીને ઉપયોગી છે જેમને ડોક્યુમેન્ટના ટોપ લેવલ પર અથવા ચોક્કસ કન્ટેનરની અંદર પોઝિશન કરવાની જરૂર હોય છે, ભલે તેમને ટ્રિગર કરનાર કમ્પોનન્ટ React કમ્પોનન્ટ ટ્રીમાં ગમે ત્યાં સ્થિત હોય.

createPortal વિના, આ હાંસલ કરવા માટે ઘણીવાર DOM ને સીધું મેનિપ્યુલેટ કરવું અથવા CSS એબ્સોલ્યુટ પોઝિશનિંગનો ઉપયોગ કરવા જેવા જટિલ ઉપાયો સામેલ હોય છે, જે સ્ટેકીંગ કોન્ટેક્સ્ટ્સ, z-index સંઘર્ષો અને એક્સેસિબિલિટી સાથે સમસ્યાઓ તરફ દોરી શકે છે.

createPortal શા માટે વાપરવું?

અહીં મુખ્ય કારણો છે કે શા માટે createPortal તમારા React શસ્ત્રાગારમાં એક મૂલ્યવાન સાધન છે:

• સુધારેલ DOM સ્ટ્રક્ચર: DOM ની અંદર કમ્પોનન્ટ્સને ઊંડાણપૂર્વક નેસ્ટ કરવાનું ટાળે છે, જેનાથી એક સ્વચ્છ અને વધુ વ્યવસ્થાપિત સ્ટ્રક્ચર બને છે. આ ખાસ કરીને ઘણા ઇન્ટરેક્ટિવ એલિમેન્ટ્સવાળા જટિલ એપ્લિકેશન્સ માટે મહત્વપૂર્ણ છે.
• સરળ સ્ટાઇલિંગ: જટિલ CSS યુક્તિઓ પર આધાર રાખ્યા વિના વ્યુપોર્ટ અથવા ચોક્કસ કન્ટેનરના સંબંધમાં એલિમેન્ટ્સને સરળતાથી પોઝિશન કરો. આ સ્ટાઇલિંગ અને લેઆઉટને સરળ બનાવે છે, ખાસ કરીને જ્યારે એવા એલિમેન્ટ્સ સાથે કામ કરતા હોય કે જેમને અન્ય કન્ટેન્ટ પર ઓવરલે કરવાની જરૂર હોય.
• વધારેલી એક્સેસિબિલિટી: કમ્પોનન્ટ હાઇરાર્કીથી સ્વતંત્ર રીતે ફોકસ અને કીબોર્ડ નેવિગેશનનું સંચાલન કરીને એક્સેસિબલ UI બનાવવાની સુવિધા આપે છે. ઉદાહરણ તરીકે, મોડલ વિન્ડોની અંદર ફોકસ રહે તેની ખાતરી કરવી.
• બહેતર ઇવેન્ટ હેન્ડલિંગ: પોર્ટલના કન્ટેન્ટમાંથી React ટ્રી પર ઇવેન્ટ્સને યોગ્ય રીતે પ્રચારિત કરવાની મંજૂરી આપે છે, એ સુનિશ્ચિત કરે છે કે પેરેન્ટ કમ્પોનન્ટ્સ સાથે જોડાયેલા ઇવેન્ટ લિસનર્સ હજી પણ અપેક્ષા મુજબ કાર્ય કરે છે.

createPortal નો મૂળભૂત ઉપયોગ

createPortal API બે દલીલો સ્વીકારે છે:

1. તમે જે React નોડ (JSX) રેન્ડર કરવા માંગો છો.
2. જે DOM એલિમેન્ટમાં તમે નોડ રેન્ડર કરવા માંગો છો. આ DOM એલિમેન્ટ createPortal નો ઉપયોગ કરતા કમ્પોનન્ટ માઉન્ટ થાય તે પહેલાં અસ્તિત્વમાં હોવું જોઈએ.

અહીં એક સરળ ઉદાહરણ છે:

ઉદાહરણ: મોડલ રેન્ડર કરવું

ધારો કે તમારી પાસે એક મોડલ કમ્પોનન્ટ છે જેને તમે body એલિમેન્ટના અંતમાં રેન્ડર કરવા માંગો છો.

            import React from 'react';
import ReactDOM from 'react-dom';

function Modal({ children, isOpen, onClose }) {
  if (!isOpen) return null;

  const modalRoot = document.getElementById('modal-root'); // Assumes you have a <div id="modal-root"></div> in your HTML

  if (!modalRoot) {
    console.error('Modal root element not found!');
    return null;
  }

  return ReactDOM.createPortal(
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        {children}
      </div>
    </div>,
    modalRoot
  );
}

export default Modal;

            

              
                Copy
              
            
          

સમજૂતી:

• અમે ReactDOM ઇમ્પોર્ટ કરીએ છીએ કારણ કે createPortal એ ReactDOM ઓબ્જેક્ટની એક મેથડ છે.
• અમે માની લઈએ છીએ કે તમારા HTML માં modal-root ID વાળો એક DOM એલિમેન્ટ છે. અહીં જ મોડલ રેન્ડર થશે. ખાતરી કરો કે આ એલિમેન્ટ અસ્તિત્વમાં છે. એક સામાન્ય પ્રથા એ છે કે તમારા index.html ફાઇલમાં ક્લોઝિંગ </body> ટેગની બરાબર પહેલાં <div id="modal-root"></div> ઉમેરવામાં આવે.
• અમે મોડલના JSX ને modalRoot એલિમેન્ટમાં રેન્ડર કરવા માટે ReactDOM.createPortal નો ઉપયોગ કરીએ છીએ.
• અમે મોડલ કન્ટેન્ટ પરના onClick ઇવેન્ટને ઓવરલે પરના onClose હેન્ડલરને ટ્રિગર કરતા રોકવા માટે e.stopPropagation() નો ઉપયોગ કરીએ છીએ. આ સુનિશ્ચિત કરે છે કે મોડલની અંદર ક્લિક કરવાથી તે બંધ ન થાય.

ઉપયોગ:

            import React, { useState } from 'react';
import Modal from './Modal';

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsModalOpen(true)}>Open Modal</button>
      <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
        <h2>Modal Content</h2>
        <p>This is the content of the modal.</p>
        <button onClick={() => setIsModalOpen(false)}>Close</button>
      </Modal>
    </div>
  );
}

export default App;

            

              
                Copy
              
            
          

આ ઉદાહરણ બતાવે છે કે સામાન્ય કમ્પોનન્ટ હાઇરાર્કીની બહાર મોડલ કેવી રીતે રેન્ડર કરવું, જે તમને તેને પેજ પર એબ્સોલ્યુટલી પોઝિશન કરવાની મંજૂરી આપે છે. આ રીતે createPortal નો ઉપયોગ કરવાથી સ્ટેકીંગ કોન્ટેક્સ્ટ્સ સાથેની સામાન્ય સમસ્યાઓ હલ થાય છે અને તમને તમારી એપ્લિકેશનમાં સરળતાથી સુસંગત મોડલ સ્ટાઇલિંગ બનાવવાની મંજૂરી આપે છે.

createPortal સાથે ઇવેન્ટ હેન્ડલિંગ

createPortal ના મુખ્ય ફાયદાઓમાંનો એક એ છે કે તે React ના સામાન્ય ઇવેન્ટ બબલિંગ વર્તનને જાળવી રાખે છે. આનો અર્થ એ છે કે પોર્ટલના કન્ટેન્ટમાંથી ઉદ્ભવતા ઇવેન્ટ્સ હજી પણ React કમ્પોનન્ટ ટ્રીમાં ઉપર પ્રચારિત થશે, જેનાથી પેરેન્ટ કમ્પોનન્ટ્સ તેમને હેન્ડલ કરી શકશે.

જોકે, જ્યારે ઇવેન્ટ્સ પોર્ટલની સીમા પાર કરે છે ત્યારે તે કેવી રીતે હેન્ડલ થાય છે તે સમજવું મહત્વપૂર્ણ છે.

ઉદાહરણ: પોર્ટલની બહાર ઇવેન્ટ્સ હેન્ડલ કરવી

            import React, { useState, useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';

function OutsideClickExample() {
  const [isOpen, setIsOpen] = useState(false);
  const dropdownRef = useRef(null);
  const portalRoot = document.getElementById('portal-root');

  useEffect(() => {
    function handleClickOutside(event) {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
        setIsOpen(false);
      }
    }

    document.addEventListener('mousedown', handleClickOutside);

    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [dropdownRef]);

  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>Toggle Dropdown</button>
      {isOpen && portalRoot && ReactDOM.createPortal(
        <div ref={dropdownRef} style={{ position: 'absolute', top: '50px', left: '0', border: '1px solid black', padding: '10px', backgroundColor: 'white' }}>
          Dropdown Content
        </div>,
        portalRoot
      )}
    </div>
  );
}

export default OutsideClickExample;

            

              
                Copy
              
            
          

સમજૂતી:

• અમે પોર્ટલની અંદર રેન્ડર થયેલા ડ્રોપડાઉન એલિમેન્ટને એક્સેસ કરવા માટે ref નો ઉપયોગ કરીએ છીએ.
• અમે ડ્રોપડાઉનની બહારના ક્લિક્સને શોધવા માટે document પર mousedown ઇવેન્ટ લિસનર જોડીએ છીએ.
• ઇવેન્ટ લિસનરની અંદર, અમે dropdownRef.current.contains(event.target) નો ઉપયોગ કરીને તપાસીએ છીએ કે ક્લિક ડ્રોપડાઉનની બહાર થયું છે કે નહીં.
• જો ક્લિક ડ્રોપડાઉનની બહાર થયું હોય, તો અમે isOpen ને false પર સેટ કરીને તેને બંધ કરીએ છીએ.

આ ઉદાહરણ બતાવે છે કે પોર્ટલના કન્ટેન્ટની બહાર થતી ઇવેન્ટ્સને કેવી રીતે હેન્ડલ કરવી, જેનાથી તમે આસપાસના ડોક્યુમેન્ટમાં વપરાશકર્તાની ક્રિયાઓનો પ્રતિસાદ આપતા ઇન્ટરેક્ટિવ એલિમેન્ટ્સ બનાવી શકો છો.

અદ્યતન ઉપયોગના કિસ્સાઓ

createPortal ફક્ત સરળ મોડલ્સ અને ટૂલટિપ્સ સુધી મર્યાદિત નથી. તેનો ઉપયોગ વિવિધ અદ્યતન પરિસ્થિતિઓમાં થઈ શકે છે, જેમાં શામેલ છે:

• કોન્ટેક્સ્ટ મેનુ: રાઇટ-ક્લિક પર માઉસ કર્સરની નજીક ગતિશીલ રીતે કોન્ટેક્સ્ટ મેનુ રેન્ડર કરો.
• સૂચનાઓ: કમ્પોનન્ટ હાઇરાર્કીને ધ્યાનમાં લીધા વિના, સ્ક્રીનની ટોચ પર સૂચનાઓ પ્રદર્શિત કરો.
• કસ્ટમ પોપોવર્સ: અદ્યતન પોઝિશનિંગ અને સ્ટાઇલિંગ સાથે કસ્ટમ પોપોવર કમ્પોનન્ટ્સ બનાવો.
• થર્ડ-પાર્ટી લાઇબ્રેરીઓ સાથે સંકલન: ચોક્કસ DOM સ્ટ્રક્ચર્સની જરૂર હોય તેવી થર્ડ-પાર્ટી લાઇબ્રેરીઓ સાથે React કમ્પોનન્ટ્સને સંકલિત કરવા માટે createPortal નો ઉપયોગ કરો.

ઉદાહરણ: કોન્ટેક્સ્ટ મેનુ બનાવવું

            import React, { useState, useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';

function ContextMenuExample() {
  const [contextMenu, setContextMenu] = useState(null);
  const menuRef = useRef(null);

  useEffect(() => {
    function handleClickOutside(event) {
      if (menuRef.current && !menuRef.current.contains(event.target)) {
        setContextMenu(null);
      }
    }
    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [menuRef]);

  const handleContextMenu = (event) => {
    event.preventDefault();
    setContextMenu({
      x: event.clientX,
      y: event.clientY,
    });
  };

  const portalRoot = document.getElementById('portal-root');

  return (
    <div onContextMenu={handleContextMenu} style={{ border: '1px solid black', padding: '20px' }}>
      Right-click here to open context menu
      {contextMenu && portalRoot && ReactDOM.createPortal(
        <div
          ref={menuRef}
          style={{
            position: 'absolute',
            top: contextMenu.y,
            left: contextMenu.x,
            border: '1px solid black',
            padding: '10px',
            backgroundColor: 'white',
          }}
        >
          <ul>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
          </ul>
        </div>,
        portalRoot
      )}
    </div>
  );
}

export default ContextMenuExample;

            

              
                Copy
              
            
          

સમજૂતી:

• અમે ટાર્ગેટ એલિમેન્ટ પર રાઇટ-ક્લિક્સ શોધવા માટે onContextMenu ઇવેન્ટનો ઉપયોગ કરીએ છીએ.
• અમે event.preventDefault() નો ઉપયોગ કરીને ડિફોલ્ટ કોન્ટેક્સ્ટ મેનુને દેખાતું અટકાવીએ છીએ.
• અમે contextMenu સ્ટેટ વેરિયેબલમાં માઉસ કોઓર્ડિનેટ્સ સ્ટોર કરીએ છીએ.
• અમે માઉસ કોઓર્ડિનેટ્સ પર પોઝિશન કરેલા પોર્ટલની અંદર કોન્ટેક્સ્ટ મેનુ રેન્ડર કરીએ છીએ.
• જ્યારે વપરાશકર્તા તેની બહાર ક્લિક કરે ત્યારે કોન્ટેક્સ્ટ મેનુ બંધ કરવા માટે અમે પાછલા ઉદાહરણની જેમ જ આઉટસાઇડ-ક્લિક ડિટેક્શન લોજિકનો સમાવેશ કરીએ છીએ.

એક્સેસિબિલિટી સંબંધિત વિચારણાઓ

જ્યારે createPortal નો ઉપયોગ કરો, ત્યારે તમારી એપ્લિકેશન દરેક માટે ઉપયોગી છે તેની ખાતરી કરવા માટે એક્સેસિબિલિટી પર વિચાર કરવો ખૂબ જ મહત્વપૂર્ણ છે.

ફોકસ મેનેજમેન્ટ

જ્યારે કોઈ પોર્ટલ ખુલે (દા.ત., મોડલ), ત્યારે તમારે ખાતરી કરવી જોઈએ કે ફોકસ આપમેળે પોર્ટલની અંદરના પ્રથમ ઇન્ટરેક્ટિવ એલિમેન્ટ પર ખસેડવામાં આવે. આ કીબોર્ડ અથવા સ્ક્રીન રીડર સાથે નેવિગેટ કરતા વપરાશકર્તાઓને પોર્ટલના કન્ટેન્ટને સરળતાથી એક્સેસ કરવામાં મદદ કરે છે.

જ્યારે પોર્ટલ બંધ થાય, ત્યારે તમારે ફોકસને તે એલિમેન્ટ પર પાછું લાવવું જોઈએ જેણે પોર્ટલ ખોલવાનું ટ્રિગર કર્યું હતું. આ એક સુસંગત નેવિગેશન ફ્લો જાળવી રાખે છે.

ARIA એટ્રિબ્યુટ્સ

પોર્ટલના કન્ટેન્ટ વિશે સિમેન્ટીક માહિતી પ્રદાન કરવા માટે ARIA એટ્રિબ્યુટ્સનો ઉપયોગ કરો. ઉદાહરણ તરીકે, મોડલ એલિમેન્ટ પર aria-modal="true" નો ઉપયોગ કરો તે દર્શાવવા માટે કે તે એક મોડલ ડાયલોગ છે. મોડલને તેના શીર્ષક સાથે સાંકળવા માટે aria-labelledby અને તેના વર્ણન સાથે સાંકળવા માટે aria-describedby નો ઉપયોગ કરો.

કીબોર્ડ નેવિગેશન

ખાતરી કરો કે વપરાશકર્તાઓ કીબોર્ડનો ઉપયોગ કરીને પોર્ટલના કન્ટેન્ટને નેવિગેટ કરી શકે છે. ફોકસ ઓર્ડરને નિયંત્રિત કરવા માટે tabindex એટ્રિબ્યુટનો ઉપયોગ કરો, અને ખાતરી કરો કે બધા ઇન્ટરેક્ટિવ એલિમેન્ટ્સ કીબોર્ડથી પહોંચી શકાય તેવા છે.

પોર્ટલની અંદર ફોકસને ટ્રેપ કરવાનું વિચારો જેથી વપરાશકર્તાઓ આકસ્મિક રીતે તેની બહાર નેવિગેટ ન કરી શકે. આ Tab કી માટે સાંભળીને અને પ્રોગ્રામેટિકલી પોર્ટલની અંદરના પ્રથમ અથવા છેલ્લા ઇન્ટરેક્ટિવ એલિમેન્ટ પર ફોકસ ખસેડીને પ્રાપ્ત કરી શકાય છે.

ઉદાહરણ: એક્સેસિબલ મોડલ

            import React, { useState, useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';

function AccessibleModal({ children, isOpen, onClose, labelledBy, describedBy }) {
  const modalRef = useRef(null);
  const firstFocusableElementRef = useRef(null);
  const [previouslyFocusedElement, setPreviouslyFocusedElement] = useState(null);
  const modalRoot = document.getElementById('modal-root');

  useEffect(() => {
    if (isOpen) {
      // Save the currently focused element before opening the modal.
      setPreviouslyFocusedElement(document.activeElement);

      // Focus the first focusable element in the modal.
      if (firstFocusableElementRef.current) {
        firstFocusableElementRef.current.focus();
      }

      // Trap focus within the modal.
      function handleKeyDown(event) {
        if (event.key === 'Tab') {
          const focusableElements = modalRef.current.querySelectorAll(
            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
          );
          const firstFocusableElement = focusableElements[0];
          const lastFocusableElement = focusableElements[focusableElements.length - 1];

          if (event.shiftKey) {
            // Shift + Tab
            if (document.activeElement === firstFocusableElement) {
              lastFocusableElement.focus();
              event.preventDefault();
            }
          } else {
            // Tab
            if (document.activeElement === lastFocusableElement) {
              firstFocusableElement.focus();
              event.preventDefault();
            }
          }
        }
      }

      document.addEventListener('keydown', handleKeyDown);

      return () => {
        document.removeEventListener('keydown', handleKeyDown);
        // Restore focus to the element that had focus before opening the modal.
        if(previouslyFocusedElement && previouslyFocusedElement.focus) {
          previouslyFocusedElement.focus();
        }
      };
    }
  }, [isOpen, previouslyFocusedElement]);

  if (!isOpen) return null;

  return ReactDOM.createPortal(
    <div
      className="modal-overlay"
      onClick={onClose}
      aria-modal="true"
      aria-labelledby={labelledBy}
      aria-describedby={describedBy}
      ref={modalRef}
    >
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        <h2 id={labelledBy}>Modal Title</h2>
        <p id={describedBy}>This is the modal content.</p>
        <button ref={firstFocusableElementRef} onClick={onClose}>
          Close
        </button>
        {children}
      </div>
    </div>,
    modalRoot
  );
}

export default AccessibleModal;

            

              
                Copy
              
            
          

સમજૂતી:

• અમે મોડલ વિશે સિમેન્ટીક માહિતી પ્રદાન કરવા માટે aria-modal, aria-labelledby, અને aria-describedby જેવા ARIA એટ્રિબ્યુટ્સનો ઉપયોગ કરીએ છીએ.
• અમે જ્યારે મોડલ ખુલે અને બંધ થાય ત્યારે ફોકસને મેનેજ કરવા માટે useEffect હૂકનો ઉપયોગ કરીએ છીએ.
• અમે મોડલ ખોલતા પહેલા હાલમાં ફોકસ થયેલા એલિમેન્ટને સાચવીએ છીએ અને જ્યારે મોડલ બંધ થાય ત્યારે તેના પર ફોકસ પુનઃસ્થાપિત કરીએ છીએ.
• અમે keydown ઇવેન્ટ લિસનરનો ઉપયોગ કરીને મોડલની અંદર ફોકસને ટ્રેપ કરીએ છીએ.

આંતરરાષ્ટ્રીયકરણ (i18n) માટેની વિચારણાઓ

જ્યારે વૈશ્વિક પ્રેક્ષકો માટે એપ્લિકેશન્સ વિકસાવતા હોવ, ત્યારે આંતરરાષ્ટ્રીયકરણ (i18n) એક નિર્ણાયક વિચારણા છે. createPortal નો ઉપયોગ કરતી વખતે, ધ્યાનમાં રાખવા માટે કેટલાક મુદ્દાઓ છે:

• ટેક્સ્ટ દિશા (RTL/LTR): ખાતરી કરો કે તમારી સ્ટાઇલિંગ ડાબે-થી-જમણે (LTR) અને જમણે-થી-ડાબે (RTL) બંને ભાષાઓને સમાવી શકે છે. આમાં CSS માં લોજિકલ પ્રોપર્ટીઝનો ઉપયોગ (દા.ત., margin-inline-start ને બદલે margin-left) અને HTML એલિમેન્ટ પર dir એટ્રિબ્યુટને યોગ્ય રીતે સેટ કરવાનો સમાવેશ થઈ શકે છે.
• કન્ટેન્ટનું સ્થાનિકીકરણ: પોર્ટલની અંદરનું બધું ટેક્સ્ટ વપરાશકર્તાની પસંદગીની ભાષામાં સ્થાનિકીકરણ થયેલું હોવું જોઈએ. અનુવાદોનું સંચાલન કરવા માટે i18n લાઇબ્રેરી (દા.ત., react-intl, i18next) નો ઉપયોગ કરો.
• સંખ્યા અને તારીખ ફોર્મેટિંગ: વપરાશકર્તાના લોકેલ અનુસાર સંખ્યાઓ અને તારીખોનું ફોર્મેટ કરો. Intl API આ માટે કાર્યક્ષમતા પ્રદાન કરે છે.
• સાંસ્કૃતિક સંમેલનો: UI એલિમેન્ટ્સ સંબંધિત સાંસ્કૃતિક સંમેલનોથી વાકેફ રહો. ઉદાહરણ તરીકે, બટન પ્લેસમેન્ટ સંસ્કૃતિઓ વચ્ચે અલગ હોઈ શકે છે.

ઉદાહરણ: react-intl સાથે i18n

            import React from 'react';
import { FormattedMessage } from 'react-intl';

function MyComponent() {
  return (
    <div>
      <FormattedMessage id="myComponent.greeting" defaultMessage="Hello, world!" />
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

react-intl માંથી FormattedMessage કમ્પોનન્ટ વપરાશકર્તાના લોકેલના આધારે અનુવાદિત સંદેશ મેળવે છે. વિવિધ ભાષાઓ માટે તમારા અનુવાદો સાથે react-intl ને ગોઠવો.

સામાન્ય ભૂલો અને તેના ઉકેલો

જ્યારે createPortal એક શક્તિશાળી સાધન છે, ત્યારે કેટલીક સામાન્ય ભૂલો અને તેમને કેવી રીતે ટાળવી તે વિશે વાકેફ રહેવું મહત્વપૂર્ણ છે:

• પોર્ટલ રૂટ એલિમેન્ટ ગુમ થવું: ખાતરી કરો કે તમે પોર્ટલ રૂટ તરીકે જે DOM એલિમેન્ટનો ઉપયોગ કરી રહ્યા છો તે createPortal નો ઉપયોગ કરતા કમ્પોનન્ટ માઉન્ટ થાય તે પહેલાં અસ્તિત્વમાં છે. એક સારી પ્રથા તેને સીધા index.html માં મૂકવાની છે.
• Z-Index સંઘર્ષો: createPortal સાથે એલિમેન્ટ્સને પોઝિશન કરતી વખતે z-index મૂલ્યોનું ધ્યાન રાખો. સ્ટેકીંગ કોન્ટેક્સ્ટ્સનું સંચાલન કરવા અને ખાતરી કરવા માટે કે તમારા પોર્ટલનું કન્ટેન્ટ યોગ્ય રીતે પ્રદર્શિત થાય છે, CSS નો ઉપયોગ કરો.
• ઇવેન્ટ હેન્ડલિંગ સમસ્યાઓ: સમજો કે ઇવેન્ટ્સ પોર્ટલ દ્વારા કેવી રીતે પ્રચારિત થાય છે અને તેમને યોગ્ય રીતે હેન્ડલ કરો. ઇવેન્ટ્સને અનિચ્છનીય ક્રિયાઓ ટ્રિગર કરતા અટકાવવા માટે e.stopPropagation() નો ઉપયોગ કરો.
• મેમરી લીક્સ: મેમરી લીક્સ ટાળવા માટે જ્યારે createPortal નો ઉપયોગ કરતો કમ્પોનન્ટ અનમાઉન્ટ થાય ત્યારે ઇવેન્ટ લિસનર્સ અને સંદર્ભોને યોગ્ય રીતે સાફ કરો. આ હાંસલ કરવા માટે ક્લીનઅપ ફંક્શન સાથે useEffect હૂકનો ઉપયોગ કરો.
• અણધારી સ્ક્રોલિંગ સમસ્યાઓ: પોર્ટલ્સ ક્યારેક પેજના અપેક્ષિત સ્ક્રોલિંગ વર્તનમાં દખલ કરી શકે છે. ખાતરી કરો કે તમારી સ્ટાઇલ સ્ક્રોલિંગને રોકી રહી નથી અને મોડલ એલિમેન્ટ્સ જ્યારે ખુલે અને બંધ થાય ત્યારે પેજ જમ્પ્સ અથવા અણધાર્યા સ્ક્રોલિંગ વર્તનનું કારણ ન બને.

નિષ્કર્ષ

React.createPortal React માં લવચીક, સુલભ અને જાળવી શકાય તેવા UI બનાવવા માટે એક મૂલ્યવાન સાધન છે. તેના હેતુ, ઉપયોગ અને ઇવેન્ટ્સ અને એક્સેસિબિલિટીને હેન્ડલ કરવા માટેની અદ્યતન તકનીકોને સમજીને, તમે જટિલ અને આકર્ષક વેબ એપ્લિકેશન્સ બનાવવા માટે તેની શક્તિનો લાભ લઈ શકો છો જે વૈશ્વિક પ્રેક્ષકોને શ્રેષ્ઠ વપરાશકર્તા અનુભવ પ્રદાન કરે છે. તમારી એપ્લિકેશન્સ સમાવિષ્ટ અને દરેક માટે ઉપયોગી છે તેની ખાતરી કરવા માટે આંતરરાષ્ટ્રીયકરણ અને એક્સેસિબિલિટીની શ્રેષ્ઠ પદ્ધતિઓ પર વિચાર કરવાનું યાદ રાખો.

આ માર્ગદર્શિકામાંના દિશાનિર્દેશો અને ઉદાહરણોને અનુસરીને, તમે આત્મવિશ્વાસપૂર્વક createPortal નો ઉપયોગ સામાન્ય UI પડકારોને હલ કરવા અને અદભૂત વેબ અનુભવો બનાવવા માટે કરી શકો છો.